Day_22 使用AJAX實現無刷新操作

2024 iThome 鐵人賽

DAY 22

Modern Web

ASP.NET Core的終極奧義：從零到無敵系列第 22 篇

16th鐵人賽

clevens1008

團隊NUTC imac

2024-09-30 00:41:11

88 瀏覽

分享至

AJAX是一種能夠在不重新加載整個頁面的情況下，從伺服器獲取數據並更新頁面的技術。透過AJAX技術，我們可以大幅提升應用的交互體驗。本篇將介紹如何在ASP.NET Core中實現AJAX操作，並展示無刷新數據交互的實作方法。

1. AJAX的基本概念

AJAX（非同步JavaScript和XML）允許我們在背景中與伺服器進行交互，而不需要重新載入整個頁面。這對於提供流暢的使用者體驗至關重要，因為用戶能夠立即看到他們操作的結果，而無需等待頁面重新載入。

2. 設定ASP.NET Core後端以支援AJAX

在ASP.NET Core中，我們需要一個API端點來處理AJAX請求。以下是一個簡單的API控制器範例，它返回一個隨機數據：

using Microsoft.AspNetCore.Mvc;

namespace YourNamespace.Controllers
{
    [ApiController]
    [Route("[controller]")]
    public class DataController : ControllerBase
    {
        [HttpGet]
        public IActionResult GetRandomNumber()
        {
            Random random = new Random();
            var randomNumber = random.Next(1, 100);
            return Ok(randomNumber);
        }
    }
}

這個DataController包含一個GET請求的端點，返回一個介於1到100之間的隨機數。

3. 在前端使用AJAX請求
為了從上述API獲取數據，我們可以使用JavaScript中的AJAX。這裡展示了如何使用jQuery來發送AJAX請求：

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX無刷新操作</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>隨機數生成器</h1>
    <button id="getRandomNumber">獲取隨機數</button>
    <div id="result"></div>

    <script>
        $(document).ready(function() {
            $('#getRandomNumber').click(function() {
                $.ajax({
                    url: '/Data',
                    type: 'GET',
                    success: function(data) {
                        $('#result').text('隨機數：' + data);
                    },
                    error: function(xhr) {
                        console.error('錯誤：', xhr);
                    }
                });
            });
        });
    </script>
</body>
</html>

在這段代碼中，我們設置了一個按鈕，用於觸發AJAX請求。當用戶點擊按鈕後，AJAX請求會發送到後端API並獲取隨機數，然後將結果顯示在頁面上。

4. 無刷新更新頁面內容
AJAX的優點在於它可以無刷新地更新頁面內容。在這個示例中，當用戶點擊“獲取隨機數”按鈕時，頁面不會完全重新載入，而是僅更新#result的內容，這樣用戶可以即時看到結果。

5. 優化AJAX請求
使用AJAX時，可以考慮以下優化措施：